<template>
  <div>
    <div class="member" @click="showCont">
      <span class="hasChild" v-if="memberInfo.children != null">[展开]</span>
      <span class="main">{{ memberInfo.member_name }}{{ memberInfo.mobile }}({{ memberInfo.num }}盒)&nbsp;
        <b style='color:#0000FF'></b>
      </span>
    </div>
    <div class="cont" v-if="memberInfo.children != null" v-show="showChild">
      <team_item v-for="(item, key) in memberInfo.children" :member-info="item" :key="key"></team_item>
    </div>
  </div>
</template>

<script>

export default {
  name: 'team_item',
  components: {

  },
  data() {
    return {
      showChild: false,
    }
  },
  props: {
    memberInfo: {
      type: Object,
      required: true,
      default: () => {},
    },
  },
  methods: {
    showCont() {
      this.showChild = !this.showChild;
    }
  },
}
</script>

<style scoped>
  div.member{border: 1px solid #CCCCCC;border-radius: 4px;text-align: left;margin-top:4px}
  div.cont{padding-left: 12px}
  span.main{display:block;font-size: 14px;line-height: 24px;padding:0 0 4px 8px;cursor:pointer;border-radius: 5px;border:1px solid #AAAAAA}
  span.hasChild{float: right;margin-top:3px;margin-right: 10px;color: #2354F9}
</style>
